import { useEffect } from 'react'
import { SvgIcon } from '@/components'
import { Space } from 'antd'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { Drawer, DrawerProps } from '..'
import styles from './index.module.less'
import { useDetailDrawer } from '@/hooks'

interface DetailDrawerProps extends DrawerProps {
  backExtra?: React.ReactNode
}
interface BackProps {
  title: React.ReactNode
  backExtra?: React.ReactNode
  onClose?: () => void
}
const Back = ({ title, backExtra, onClose }: BackProps) => {
  return (
    <div className={styles['back-container']}>
      <Space className={styles['back-header']} size={8} onClick={onClose}>
        <SvgIcon size={20} name="back" />
        <span className={styles['back-title']}>{title}</span>
      </Space>
      {backExtra}
    </div>
  )
}

export const DetailDrawer = ({ title, backExtra, children, ...restProps }: DetailDrawerProps) => {
  const { open, onClose } = useDetailDrawer()
  return (
    <Drawer
      rootClassName={styles['detail-drawer']}
      closable={false}
      open={open}
      width={'100%'}
      getContainer={false}
      autoFocus={false}
      {...restProps}
    >
      <Back title={title} backExtra={backExtra} onClose={onClose} />
      <div className={styles['detail-wrapper']} id="scroll-wrapper">
        {children}
      </div>
    </Drawer>
  )
}
